<template>
    <div class="content">
        <el-row>
            <el-col :span="24">
                <el-button size="mini" type="primary" @click="dialogFormVisible = true">添加账号</el-button>
            </el-col>

            <el-col :span="24" style="margin-top:20px;">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        align="center"
                        prop="date"
                        label="日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="province"
                        label="省份"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="city"
                        label="市区"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="address"
                        label="地址"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="zip"
                        label="邮编"
                        width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="status" label="启用状态" >
                        <template slot-scope="scope">
                            <el-tooltip
                                :content="scope.row.status ? '启用' : '封禁'"
                                placement="top"
                            >
                                <el-switch
                                :value="scope.row.status"
                                :active-value="1"
                                :inactive-value="0" 
                                @change="switchChange($event,scope.row,scope.$index)"    
                                >
                                </el-switch>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="100">
                    <template align="center" slot-scope="scope">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button class="text-red" @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 添加账号 -->
        <el-dialog title="新增/编辑账号" width="80%" :visible.sync="dialogFormVisible">
            <el-form class="inlineForm" size="mini" :model="form" :rules="rules" inline label-position="left"  :label-width="formLabelWidth">
                <el-form-item label="用户名" prop="nickname" >
                  <el-input v-model="form.nickname" placeholder="请输入用户名" clearable autocomplete="off" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name" >
                  <el-input v-model="form.name" placeholder="请输入姓名" clearable autocomplete="off"  show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile" >
                  <el-input v-model="form.name" type="tel" placeholder="请输入手机号码" clearable autocomplete="off" maxlength="11" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" >
                  <el-input v-model="form.password" type="password" placeholder="请输入密码" clearable autocomplete="off"  show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repassword" >
                  <el-input v-model="form.repassword" type="password" placeholder="请再次输入密码" clearable autocomplete="off"  show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="角色权限" prop="role" >
                   <el-radio-group v-model="form.role">
                        <el-radio v-for="(role,i) in roles" :key="i" :label="role.value">{{role.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="启用状态" >
                   <el-switch
                    v-model="form.status"
                    >
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="mini" type="primary"  >提交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { validateMobile, validatePassword } from '@/utils/validate'
export default {
    name:'setting_index',
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        return {
            dialogFormVisible:false,
            formLabelWidth:"80px",
            roles:[
                {
                    label:'运营管理员',
                    value:1
                },
                {
                    label:'产品管理员',
                    value:2
                },
                {
                    label:'商品管理员',
                    value:3
                },
            ],
            form: {
                nickname:"",
                name:'',
                mobile:'',
                password:'',
                repassword:'',
                role:"",
                status:true
            },
            rules:{
                nickname:[{ required: true, message: '请输入用户', trigger: 'blur' }],
                name:[ { required: true, message: '请输入姓名', trigger: 'blur' } ],
                mobile:[ 
                    { required: true, message: '请填写账号/联系电话', trigger: 'blur' },
                    { validator:validateMobile, message: '请输入正确手机格式', trigger:'blur' }
                ],
                password:[{ required: true, message: '请输入密码', trigger: 'blur' }, { validator:validatePassword,  trigger:'blur' }],
                repassword:[{ required: true, message: '请输入密码', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' }],
                role:[{ required: true, message: '请选择角色权限', trigger: 'change' }]
            },
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    status:1
                }
            ]    
        }
    },
    methods:{
        handleClick(row) {
            console.log(row);
        },

        switchChange(e,row,index){
            row.status = e
        }
    }
}
</script>

<style lang="scss" scoped>
.content{
    .text-red{
        color:$red;
    }
    .inlineForm{
        .el-form-item{
            width: 100%;
            ::v-deep.el-input{
                width: 40vw;
            }
        }
    }
}
</style>